<template>
	<view class="content">
		<view class="dingbu">
			<view class="status_bar">
			 </view>
			<uni-nav-bar   title="首页" @clickRight="infotitle()">
				<view slot="right" class="info iconfont icon-xiaoxi"></view>
			</uni-nav-bar>
		</view>
		
		<view class="cont">
			<!-- tab切换 -->
			<view class="cont_head">
				<view class="head_item" v-for="(item,index) in list" :key="index" @click="watch(item.id)">
					<view class="head_img0" :class="'head_img' + index" :style="{'background': item.bg}">
						<image :src="item.img" mode=""></image>
						<view class="loding2">
							<view class="demo2"></view>
							<view class="demo2"></view>
							<view class="demo2"></view>
						</view>
					</view>
					<view  :class="sel == item.id ? 'head_title1' :'head_title'">{{item.title}}</view>
				</view>
			</view>
			<!-- 轮播图 -->
			 <swiper class="swiper cont_ban"  :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item "><image :src="ajax + item" mode=""></image></view>
					<!-- <view class="swiper-item "><image src="../../static/homebg.png" mode=""></image></view> -->
				</swiper-item>
			</swiper>
			<!-- 直播间 -->
			<view class="cont_video">
				<view class="cont_item" v-for="(item,index) in livelist" :key="index" @click="live(item)">
					<image :src="item.list_image" mode=""></image>
					<view class="cont_live">
						<view class="loding">
							<view class="demo2"></view>
							<view class="demo2"></view>
							<view class="demo2"></view>
						</view>
						<view class="now">直播中...</view>
					</view>
					<view class="cont_user">
						<image :src="ajax + item.avatar" mode=""></image>
						<text>{{item.nickname}}</text>
						<text class="more iconfont icon-ziyuan"></text>
					</view>
				</view>
			
			</view>
			<view class="wu" v-if="livelist.length == 0">暂无直播~</view> 
			
		</view>
		
		<view class="mask_bg" v-if="active == 1"  @touchmove.stop.prevent="moveHandle">
			<view class="mask" @touchmove.stop.prevent="moveHandle">
				<text class="close iconfont icon-guanbi1" @click="guanbi()"></text>
				<scroll-view scroll-y="true" class="scr">
					<view class="info_item" v-for="(item,index) in xiaoxilist" :key="index">
						<view class="info_title">{{item.title}}</view>
						<view class="info_time">{{item.createtime  | formatDate}}</view>
						<view class="info_cont">{{item.content}}</view>
					</view>
				</scroll-view>
				<view class="wu" v-if="xiaoxilist.length == 0">暂无消息~</view> 
			</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="mask_bg1" v-if="mask_show" @touchmove.stop.prevent>
			<view class="mask1">
				<view class="out">提示</view>
				<view class="out out1">试看时间已到,请充值会员。</view>
				<view class="btn" @click="go()">确定</view>
				<view class="back" @click="navigateBack()">返回</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {	
		components: {uniNavBar},
		data() {
			return {
				list:[
					{bg:'url(../../static/head2.png) no-repeat',title:'推荐一区',img:'../../static/user1.png',id:1},
					{bg:'url(../../static/head3.png) no-repeat',title:'推荐二区',img:'../../static/user2.png',id:2},
					{bg:'url(../../static/head4.png) no-repeat',title:'推荐三区',img:'../../static/user3.png',id:3},
					],
				livelist:[],
				active:0,
				sel:1,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				username:'',
				banner:[],
				xiaoxilist:[],
				ajax:'',
				look:'',//是否可以观看
				mask_show: false,
				can_view_live: true,
			}
		},
		onLoad() {
			this.liebiao()
			this.lunbo()
			this.ajax = getdata.imgUrl
		},
		onShow(){
			this.userinfo()	
		},
		methods: {
			getUrl(url){
				if (url[0] == '/') {
					return this.ajax + url;
				} else {
					return url;
				}
			},
			go(){
				uni.navigateTo({
				    url: '../mine/vip/vip'
				});
			},
			navigateBack(){
				this.mask_show = false;
			},
			userinfo(){
				//用户信息
				var _this = this
				var token = uni.getStorageSync('token')
				console.log(token)
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log(res,'res')
						if(res.data.code == 1){
							_this.dengji = res.data.data.user_level
							_this.username = res.data.data.nickname
							_this.can_view_live = res.data.data.can_view_live
							
							uni.setStorageSync('gender1', res.data.data.gender);
							uni.setStorageSync('code', res.data.data.code);
							uni.setStorageSync('freetime', res.data.data.free_time);
							
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			lunbo(){
				//轮播图
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/movie/banner',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						// console.log(res)
						if(res.data.code == 1){
							_this.banner = res.data.data
							_this.banner = _this.banner.split(",");
							// console.log(_this.banner)
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
			},
			watch(id){
				//直播列表切换
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {type:id}
				console.log(data,'请求直播列表切换')
				uni.request({
					url: getdata.websiteUrl + '/movie/index',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						console.log(res,)
						uni.hideLoading();
						if(res.data.code == 1){
							_this.sel = id
							_this.livelist = res.data.data.data
							_this.look = res.data.data.is_look
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			liebiao(){
				//直播列表
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {type:1}
				uni.request({
					url: getdata.websiteUrl + '/movie/index',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						console.log(res,'index')
						uni.hideLoading();
						if(res.data.code == 1){
							_this.livelist = res.data.data.data
							_this.look = res.data.data.is_look
							
							_this.livelist.forEach((item, index) => {
								item.list_image = _this.getUrl(item.list_image)
							});
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			infotitle(){
				//系统消息
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/index/news',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						this.active =1
						console.log(res,'info')
						uni.hideLoading();
						if(res.data.code == 1){
							_this.xiaoxilist = res.data.data
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						this.active =1
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			moveHandle(){
				return;
			},
			guanbi(){
				this.active =0
			},
			live(item){
				var _this = this
				
				if(!_this.can_view_live) {
					_this.mask_show = true;
				} else {
					if(_this.dengji == 0 && _this.sel == 1){
						// 普通用户跳转直播试看
						uni.navigateTo({
						    url: 'live2/live2?nickname=' + item.nickname + '&wx=' + item.wx + '&avatar=' + item.avatar+  '&num=' + item.num+ '&user_images=' + item.user_images+ '&username=' + _this.username+ '&image=' + item.image
						});
					}else if(_this.dengji == 0 &&  _this.sel == 2 || _this.dengji == 0 && _this.sel == 3  ){
						// 普通用户不能看二三区
						getdata.shou('升级会员查看更多直播')
					}else if(_this.dengji == 1 && _this.sel == 1 && _this.look == 1){
						// 月卡可以看一区
						uni.navigateTo({
						    url: 'live2/live2?nickname=' + item.nickname + '&wx=' + item.wx + '&avatar=' + item.avatar+  '&num=' + item.num+ '&user_images=' + item.user_images+ '&username=' + _this.username+ '&image=' + item.image
						});
					}else if(_this.dengji == 1 && _this.sel == 1 && _this.look == 0){
						// 月卡可以看一区
						getdata.shou('当前时间段不可观看')
					}else if(_this.dengji == 1 && _this.sel == 2 || _this.dengji == 1 && _this.sel == 3  ){
						// 月卡不能看二三区
						getdata.shou('升级会员查看更多直播')
					}else if(_this.dengji == 2 && _this.sel == 1 || _this.dengji == 2 && _this.sel == 2){
						// 季卡可以看一二区
						uni.navigateTo({
						    url: 'live2/live2?nickname=' + item.nickname + '&wx=' + item.wx + '&avatar=' + item.avatar+  '&num=' + item.num+ '&user_images=' + item.user_images+ '&username=' + _this.username+ '&image=' + item.image
						});
					}else if(_this.dengji == 2 && _this.sel == 3){
						// 季卡不可以看三区
						getdata.shou('升级会员查看更多直播')
					}else{
						// 跳转直播页面
						uni.navigateTo({
						    url: 'live2/live2?nickname=' + item.nickname + '&wx=' + item.wx + '&avatar=' + item.avatar+  '&num=' + item.num+ '&user_images=' + item.user_images+ '&username=' + _this.username+ '&image=' + item.image
						});
					}
				}
				
			}
		},
		filters:{
			//过滤器，时间戳转时间
				formatDate: function(value) {
					var date = new Date();
					//date.setTime(value);
					var month = date.getMonth() + 1;
					var hours = date.getHours();
					if (hours < 10)
						hours = "0" + hours;
					var minutes = date.getMinutes();
					if (minutes < 10)
						minutes = "0" + minutes;
					var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
						" " + hours + ":" + minutes;
					return time;
				}
		},
	}
</script>

<style lang="scss">
@import '../../static/iconfont/iconfont.css';	
.dingbu{
	position: fixed;
	left:0;
	top:0;
	z-index: 999;
}
.wu{
	text-align: center;
	font-size: 30rpx;
	color: #8D8D97;
}
.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }	
.uni-navbar--border{
	border: none !important;
}	
.uni-nav-bar-text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.info{
	font-size: 32rpx;
	color: #333333;
	box-sizing: border-box;
	padding-top: 10rpx;
}

.cont{
	// margin-top:200rpx;
	// margin-top: -moz-calc(var(--status-bar-height) + 150rpx) ;
	// margin-top: -webkit-calc(var(--status-bar-height) + 150rpx);
	margin-top: calc(var(--status-bar-height) + 88rpx);
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx;
	background-color: #FFFFFF;
	.cont_head{
		display: flex;
		justify-content: space-between;
		.head_item{
			
			.head_img0{
				background: url(../../static/head1.png) no-repeat;
				background-size:100% 100% !important;
				width: 95rpx;
				height: 99rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				image{
					
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.loding2{
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-left: 10rpx;
					position: absolute;
					right:10rpx;
					bottom: 7rpx;
					width: 28rpx;
					height: 28rpx;
					background: #1578F2;
					border-radius: 50%;
					.demo2{
						width: 4rpx;
						height: 10rpx;
						background: #FFFFFF;
						margin-left: 3rpx;
						margin-right: 3rpx;
						border-radius: 2rpx;
						animation: demo2 linear 1s infinite;
					}
					.demo2:nth-child(1){
					    animation-delay:0.2s;
					}
					.demo2:nth-child(2){
					    animation-delay:0.4s;
					}
					.demo2:nth-child(3){
					    animation-delay:0.6s;
					}
					@keyframes demo2 
					{
					    0%,60%,100% {transform: scale(1);}
					    30% {transform: scaleY(2);}
					}
					@-webkit-keyframes demo2 
					{
					    0%,60%,100% {transform: scale(1);}
					    30% {transform: scaleY(2);}
					}
				}
			}
			.head_img1{
				width: 94rpx;
				height: 101rpx;
				image{
					margin-top: 8rpx;
				}
			}
			.head_img2{
				width: 94rpx;
				height: 103rpx;
				image{
					margin-top: 6rpx;
				}
			}
			.head_img3{
				width: 95rpx;
				height: 103rpx;
				
			}
			.head_img4{
				width: 95rpx;
				height: 109rpx;
				image{
					margin-top: 8rpx;
				}
			}
			.head_title{
				font-size: 24rpx;
				line-height: 24rpx;
				font-family: PingFang SC;
				color: #333333;
				margin-top: 10rpx;
				text-align: center;
			}
			.head_title1{
				font-size: 24rpx;
				line-height: 24rpx;
				font-family: PingFang SC;
				color: #1578F2;
				margin-top: 10rpx;
				text-align: center;
			}
		}
	}
	.cont_ban{
		width: 100%;
		height: 250rpx;
		border-radius: 20rpx;
		margin-top: 18rpx;
		image{
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}
	}
	.cont_video{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 35rpx;
		.cont_item{
			width: 342rpx;
			height: 430rpx;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			position: relative;
			image{
				width: 342rpx;
				height: 430rpx;
				border-radius: 10rpx;
			}
			.cont_live{
				width: 140rpx;
				height: 42rpx;
				background: #1578F2;
				border-radius: 0px 20rpx 20rpx 0px;
				position: absolute;
				left:0;
				top:16rpx;
				display: flex;
				align-items: center;
				.loding{
					display: flex;
					margin-left: 10rpx;
					.demo2{
						width: 6rpx;
						height: 10rpx;
						background: #FFFFFF;
						margin-right: 6rpx;
						border-radius: 2rpx;
						animation: demo2 linear 1s infinite;
					}
					.demo2:nth-child(1){
					    animation-delay:0.2s;
					}
					.demo2:nth-child(2){
					    animation-delay:0.4s;
					}
					.demo2:nth-child(3){
					    animation-delay:0.6s;
					}
					@keyframes demo2 
					{
					    0%,60%,100% {transform: scale(1);}
					    30% {transform: scaleY(2.5);}
					}
					@-webkit-keyframes demo2 
					{
					    0%,60%,100% {transform: scale(1);}
					    30% {transform: scaleY(2.5);}
					}
				}
				.now{
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
					line-height: 1;
					margin-left: 10rpx;
				}
			}
			.cont_user{
				width: 100%;
				height: 70rpx;
				position: absolute;
				left:0;
				bottom:0;
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-left: 15rpx;
				}
				text{
					font-size: 20rpx;
					line-height: 1;
					font-family: PingFang SC;
					color: #FFFFFF;
					margin-left: 15rpx;
				}
				.more{
					margin-left: auto;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
}

.mask_bg{
	z-index: 999;
	width: 100vw;
	height: 100vh;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
    background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	.mask{
		width: 690rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		box-sizing: border-box;
		padding: 70rpx 0;
		.scr{
			height: 100%;
		}
		.close{
			position: absolute;
			top:38rpx;
			right:38rpx;
			font-size: 50rpx;
			color: #000000;
		}
		.info_item{
			box-sizing: border-box;
			padding: 65rpx 110rpx 80rpx 55rpx;
			border-bottom: 2rpx solid #E2E3E6;
			.info_title{
				font-size: 30rpx;
				line-height: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #262626;

			}
			.info_time{
				font-size: 26rpx;
				line-height: 26rpx;
				font-family: PingFang SC;
				color: #797979;
				margin-top: 20rpx;
			}
			.info_cont{
				font-size: 24rpx;
				line-height: 1.5;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				margin-top: 50rpx;
			}
		}
	}
}


.mask_bg1{
	z-index: 2;
	width: 100vw;
	height: 100vh;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	.mask1{
		width: 624rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		.out{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
			padding-top: 25rpx;
		}
		.out1{
			padding-top: 70rpx;
		}
		.btn{
			width: 300rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #1578F2;
			border-radius: 45rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			text-align: center;
			margin: 60rpx auto 0;
		}
		.back{
			width: 300rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #fff;
			border-radius: 45rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #1578F2;
			text-align: center;
			margin: 0 auto ;
		}
	}
}
</style>
